<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Simple Two-way Binding</title>
  </head>
  <body>
    <div id="app">
      <!-- <input v-model="message" placeholder="编辑我..."
        /> -->
      <p>消息是: {{ kkx }}</p>
      <p>{{message}}</p>
      <p>{{twomessage}}</p>
      <p>double-{{twomessage}}</p>
      <p>{{cc.name}}</p>
      <p>{{dd}}</p>
      <button @click="handlesplice">splice</button>
    </div>
    <!-- 引入Vue -->
    <script src="vue/dist1/vue.js"></script>
    <script>
      // 创建Vue实例
      const a = new Vue({
        el: "#app",
        // data中的数据会是一个watcher,粒度变粗了，这个对象里有数据发生变化，整个页面开始渲染
        data() {
          return {
            message: "Hello Vue!",
            kkx: "卡卡西",
            cc: {
              name: "5555",
            },
            dd: ["a", "b", "c", "d"],
          };
        },
        computed: {
          twomessage() {
            return this.message + "1";
          },
          // 只是会生成一个watcher，但是并未插入到dep依赖中
          // 数据更新时
          kkx1() {
            return this.kkx + "8996";
          },
        },
        methods: {
          handlesplice() {
            this.message = this.message + "/test";
            // this.$set(this.cc, "age1", 18);
            // console.log(this.cc);
            // this.$delete(this.cc, "name");
            // console.log(this.cc);
            const tree = [
              {
                label: "技术中台组",
                value: "10032",
                parentId: "10005",
                children: null,
                level: "4",
              },
              {
                label: "架构组",
                value: "10017",
                parentId: "10005",
                children: null,
                level: "4",
              },
              {
                label: "技术创新组",
                value: "10019",
                parentId: "10005",
                children: null,
                level: "4",
              },
            ];
            for (let node of tree) {
              if (tree.length === 3 && tree[0].value == "10032") {
                console.log(node);
              }
            }
          },
        },
        created() {
          console.log("created开始");
          // this.handlesplice();
          console.log("created结束");
        },
        watch: {
          cc: {
            handler(name) {
              console.log(name, "cc");
            },
            immediate: true,
          },
          // kkx(val) {
          //   console.log(val, "kkxone");
          // },
        },
      });
    </script>
  </body>
</html>
